<script setup>
import User from "./user/index.vue";
import Banner from "@/components/Banner.vue";
import HotCategory from "@/views/home/HotCategory.vue";
import Article from "@/views/home/Article/index.vue";
import Recommand from "@/views/home/Recommand/index.vue";
import Follow from "@/views/home/Follow/index.vue";
import Tags from "@/views/home/Tag/index.vue";
import weacherPlugin from "@/components/weacher-plugin.vue";
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import { getArticleList } from "@/api/article.js";
const typeId = ref();
const bannerList = ref([]);
onMounted(() => {
  useStore().dispatch("getWebInfo");
  getBanner();
});

const handleEmit = (id) => {
  typeId.value = id;
};

const getBanner = async () => {
  const res = await getArticleList({
    isBanner: 1,
  });
  bannerList.value = res.data;
  console.log(res, "轮播推荐");
};
</script>

<template>
  <div class="main">
    <!-- banner和博客作者 -->
    <div class="banner-box">
      <Banner :banner="bannerList"/>
      <div class="banner-info">
        <User />
      </div>
    </div>
    <!-- 文章分类导航 -->
    <HotCategory @tabNameChange="handleEmit" />
    <!-- 公告 -->
    <div class="notice"> 
      <svg-icon name="message" color="purple" width="18px" height="18px"></svg-icon>
      <p>这里是公告消息区域</p>
    </div>
    <div class="content">
      <div class="left">
        <Article :typeId="typeId" />
      </div>
      <div class="right">
        <el-card class="tip">
          <img src="@/assets/images/1.jpg" alt="" />
        </el-card>
        <!-- 推荐文章 -->
        <Recommand />
        <!-- 关注我 -->
        <Follow />
        <!-- 标签墙 -->
        <Tags />
        <!-- 天气card -->
        <weacherPlugin />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main {
  margin: 0 auto;
  width: 70%;
  padding-top: 20px;
  //banner区域
  .banner-box {
    width: 100%;
    display: flex;
    height: 420px;
    .banner-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 20px;
    }
  }
  // 公告
  .notice {
    display: flex;
    margin-bottom: 15px;
    cursor: pointer;
    transition: color 0.25s;
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 42px;
    background: #fff;
    border-radius: 5px;
    transition: all 0.5s ease-out;
    align-items: center;
    :deep svg {
      // vertical-align: -4px;
      margin-right: 10px;
    }
    &:hover {
      box-shadow: 1px 1px 10px 5px $shadowcolor; //水平、垂直阴影、模糊大小、阴影大小
    }
    p {
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .content {
    display: flex;
    .left {
      flex: 1;
    }
    .right {
      width: 33%;
      margin-left: 20px;
      // 广告区域
      .tip {
        margin-bottom: 20px;
        border-radius: 5px;
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        &:hover {
          box-shadow: 1px 1px 10px 5px $shadowcolor;
        }
        img {
          width: 100%;
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .main {
    width: 100%;
    padding: 0 10px;

    .banner-box {
      height: 200px;
      .banner-info {
        display: none;
      }
    }
  }

  .content {
    .right {
      display: none;
    }
  }
}
</style>
